<template>
  <div class="topMenus">
    <img class="avatar" :src="info.avatar" alt="">
    <div class="name">{{info.name}}</div>
    <div class="relative" ref="showPanel">
      <a-dropdown :trigger="['click']" class="dropdown">
        <a class="ant-dropdown-link" @click="changeDrop">{{selectName}}<a-icon :class="{go:rotate , aa :!rotate}" type="caret-down" style="margin-left: 10px" /></a>
      </a-dropdown>
      <div v-if="rotate" class="absolute">
        <div class="storeCon">
          <div class="store" v-if="listObj.stores && listObj.stores.length>0">
            <div v-for="(item,index) in  listObj.stores" :class="item.store_no == selectId && type === 1?'active':''" @click="clearStorage(item,1,'store_no')" :key="index">{{item.name}}</div>
          </div>
        </div>
        <div class="storeCon">
        <div class="store" v-if="listObj.areas && listObj.areas.length>0">
          <div v-for="(item,index) in  listObj.areas" :class="item.area_no == selectId && type === 2?'active':''"  @click="clearStorage(item,2,'area_no')"  :key="index">{{item.name}}</div>
        </div>
        </div>
        <div class="storeCon">
        <div class="store" v-if="listObj.headquarter_authorize == 1">
          <div :class="0 == selectId && type === 3?'active':''" @click="clearStorage(listObj,3,'as')">{{listObj.headquarters_name}}</div>
        </div>
        </div>
      </div>
    </div>
    <img src="@/assets/gb.png" alt="" @click="logout">
  </div>
</template>
<script>
export default {
  name:'TopMenus',
  data(){
    return {
      info:{},
      rotate: false,
      listObj:{},
      selectId:0,
      selectName:'--',
      type:1
    }
  },
  created() {
    this.info = JSON.parse(localStorage.getItem('info'));
    if(localStorage.getItem('noData')){
      let data = JSON.parse(localStorage.getItem('noData'));
      this.info = data.info;
      this.listObj = data.listObj;
      this.selectId = data.selectId;
      this.selectName = data.selectName;
      this.type = data.type;
      this.clearStorage(data.item,data.typeCopy,data.key)
    }else{
      this.getAdmin()
    }
  },
  methods:{
    clearStorage(item,type,key){
      this.type = type;
      if(type == 3) {
        this.selectId = 0;
        this.selectName = this.listObj.headquarters_name;
      }else {
        this.selectId = item[key];
        this.selectName=item.name
      }
      let data = {
        is_headequarter:0,
        is_area:0,
        store_no:0,
        area_no:0
      };
      switch (type) {
        case 1:
          data.store_no = item[key];
        break;
        case 2:
          data.is_area = 1;
          data.area_no = item[key];
        break;
        case 3:
          data.is_headequarter = 1;
        break;
      }
      this.resetSetItem('search', JSON.stringify(data));
      let datas = {};
      datas.info = this.info;
      datas.listObj = this.listObj;
      datas.selectId = this.selectId;
      datas.selectName = this.selectName;
      datas.type = this.type;
      datas.item = item;
      datas.typeCopy = type;
      datas.key = key;
      localStorage.setItem('noData',JSON.stringify(datas))
    },
    getAdmin(){
      this.Api.permissions().then(res=>{
        if(res.code !== 200) return;
        this.listObj = res.data;
        if(!res.data.web || res.data.web.length<=0){
          this.logout()
        }
        if(res.data.stores && res.data.stores.length>0){
          this.clearStorage(res.data.stores[0],1,'store_no')
        }else if(res.data.area_no && res.data.area_no.length>0){
          this.clearStorage(res.data.area_no[0],2,'area_no')
        }else{
          this.clearStorage(res.data,3,'as')
        }
      })
    },
    changeDrop(e){
      e.preventDefault();
      this.rotate = !this.rotate;
      document.addEventListener('click',(e)=>{
        if(this.$refs.showPanel && this.rotate){
          let isSelf = this.$refs.showPanel.contains(e.target);
          if(!isSelf){
            this.rotate = false;
            document.removeEventListener('click',e=>{})
          }
        }
      })
    },
    logout(){
      this.Api.logout().then(res=>{
        if(res.code !== 200) return this.$message.info(res.msg);
        localStorage.removeItem('info');
        localStorage.removeItem('search');
        localStorage.removeItem('noData');
        this.$router.push({path:'/login'})
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .topMenus{
    .relative{
      position: relative;
      .absolute{
        /*padding: 0 16px;*/
        box-sizing: border-box;
        height: 300px;
        overflow: hidden;
        position: absolute;
        top: 50px;
        right: -16px;
        z-index: 99;
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.3);
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        .storeCon{
          overflow: hidden;
          border-right: 1px solid #d9d9d9;
          .store{
            overflow-y: scroll;
            div{
              white-space: nowrap;
              padding: 8px 16px;
              box-sizing: border-box;
              cursor: pointer;
            }
            .active{
              background: #E7F1FF;
              color: #006AFF;
              font-size: 14px;
            }
          }
        }
        .storeCon:nth-last-child(1){
          border-right: none;
        }
        .store::-webkit-scrollbar-thumb{
          width: 5px;
          height: 10px;
          background: red;
        }
        .store::-webkit-scrollbar {display:none}
      }
    }
  }
  .aa {
    transition: all .5s;
  }

  .go {
    transform: rotate(180deg);
    transition: all .5s;
  }
</style>
